<template>
  <div class="push-log-detail w-full h-full display-flex-column" style="overflow: hidden">
    <a-table
      :loading="isTableLoading"
      class="dist-simple-table w-full"
      :columns="columns"
      :data-source="dataList"
      :pagination="pagination"
      :scroll="{ x: true, y: 700 }"
    >
      <template slot="pushProcess" slot-scope="text,record">
        <div class="display-flex-column">
          <div class="stage-item display-flex" v-for="item in record.stageList" :key="item.DEAL_ID">
            <div class="item-title" style="width: 90px"> {{ item.dealState || item.activityName }}</div>
            <div class="item-content flex-1" :title="item.responseData">{{ item.responseData }}</div>
          </div>
        </div>
      </template>
      <template slot="operate" slot-scope="text,record">
        <div class="display-flex">
          <a-button type="primary" @click="handlerRefreshProcess(record)">更新进度</a-button>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
import sqlService from '@/api/sqlService'
import pushLogService from '@/api/pushLogService'

const columns = [
  {
    title: '项目名称',
    dataIndex: 'XMMC',
    align: 'left',
    width: '15%'
  },
  {
    title: '3.0统一办件号',
    dataIndex: 'UNIQUENAME',
    align: 'center',
    width: '15%'
  },
  {
    title: '业务类型',
    dataIndex: 'BUSINESSNAME',
    align: 'center',
    width: '10%'
  },
  {
    title: '当前环节',
    dataIndex: 'TASKNAME',
    align: 'center',
    width: '8%'
  },
  {
    title: '生命周期',
    dataIndex: 'LIFESTATE',
    align: 'center',
    width: '8%'
  },
  {
    title: '流程状态',
    dataIndex: 'PROCESSSTATE',
    align: 'center',
    width: '8%'
  },
  {
    title: '接口调用进度',
    dataIndex: 'pushProcess',
    align: 'left',
    width: '30%',
    scopedSlots: { customRender: 'pushProcess' }
  },
  {
    title: '操作',
    dataIndex: 'operate',
    width: '80px',
    scopedSlots: { customRender: 'operate' }
  }
]
export default {
  name: 'PushLogDetail',
  props: {},
  data () {
    return {
      selectedTab: this.$parent.tab,
      isTableLoading: false,
      columns: columns,
      pagination: {
        pageSize: 10, // 默认每页显示数量
        total: 0,
        current: 1,
        showSizeChanger: true, // 显示可改变每页数量
        showTotal: (total) => `共${total}条数据`, // 显示总数
        onChange: (current, pageSize) => {
          this.pagination.current = current
          this.pagination.pageSize = pageSize
          this.loadData(this.preParams)
        }
      },
      dataList: [],
      preParams: {}
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    async handlerRefreshProcess (record) {
      if (record.isLoading) {
        return
      }
      record.isLoading = true
      const projectId = record.PID
      await pushLogService.saveAndGetPushLog(projectId)
      // '基础事项', '延期变更', '注销'
      let detailSqlConfigName = 'getPushLogDetail'
      if (this.selectedTab === '基础事项') {
        detailSqlConfigName = 'getPushLogDetail'
      } else if (this.selectedTab === '延期变更') {
        detailSqlConfigName = 'getExtPushLogDetail'
      } else if (this.selectedTab === '注销') {
        detailSqlConfigName = 'getDesPushLogDetail'
      } else {
        // 其他待扩展事项
      }
      await this.doSpecial([record], null, detailSqlConfigName)
      this.$message.success('更新成功')
    },
    async loadData (params = {}, toFirst) {
      this.selectedTab = this.$parent.tab
      this.preParams = params
      if (toFirst) {
        this.pagination.current = 1
      }
      this.isTableLoading = true
      // '基础事项', '延期变更', '注销'（第一次初始化页面默认加载基础事项）
      let difSqlConfigName = 'listPushLog'
      let detailSqlConfigName = 'getPushLogDetail'
      if (this.selectedTab === '基础事项') {
        difSqlConfigName = 'listPushLog'
        detailSqlConfigName = 'getPushLogDetail'
      } else if (this.selectedTab === '延期变更') {
        difSqlConfigName = 'listExtPushLog'
        detailSqlConfigName = 'getExtPushLogDetail'
      } else if (this.selectedTab === '注销') {
        difSqlConfigName = 'listDesPushLog'
        detailSqlConfigName = 'getDesPushLogDetail'
      } else {
        console.log('其他扩展类型: ', this.selectedTab)
        this.isTableLoading = false
        return
      }
      const sqlParam = {
        sqlConfigName: difSqlConfigName,
        pageIndex: this.pagination.current,
        pageSize: this.pagination.pageSize,
        params: Object.assign({}, params)
      }
      const data = await sqlService.pageQuery(sqlParam)
      const rows = data.rows
      await this.doSpecial(rows, null, detailSqlConfigName)
      this.pagination.total = data.total
      this.dataList = rows
      this.isTableLoading = false
    },
    async doSpecial (rows, data, detailSqlConfigName) {
      if (rows.length <= 0) {
        return
      }
      const projectIdList = []
      const idMap = {}
      rows.forEach(item => {
        item.isLoading = false
        projectIdList.push(item.PID)
        idMap[item.PID] = item
      })
      if (!data) {
        data = await sqlService.listQuery({
          params: {},
          data: {
            sqlConfigName: detailSqlConfigName,
            params: {
              projectId: projectIdList
            }
          }
        })
      }
      const projectIdMap = {}
      data.forEach(item => {
        if (!projectIdMap[item.PID]) {
          projectIdMap[item.PID] = []
        }
        projectIdMap[item.PID].push(item)
      })
      projectIdList.forEach(projectId => {
        const stageList = []
        const dealIdList = []
        const list = projectIdMap[projectId]
        if (list && list.length > 0) {
          list.forEach(item => {
            if (dealIdList.indexOf(item.DEAL_ID) < 0) {
              dealIdList.push(item.DEAL_ID)
              const data = {
                dealState: item.F_DEAL_STATE,
                activityName: item.ACTIVITYNAME,
                responseData: item.F_RESPONSEDATA
              }
              stageList.push(data)
            }
          })
        }
        idMap[projectId].stageList = stageList
      })
    },
    init () {
      this.loadData()
    }
  }
}
</script>

<style scoped lang="less">
.push-log-detail {
  padding: 10px;

  /deep/ .dist-simple-table {
    display: flex;
    overflow: hidden;
    flex: 1;

    th {
      text-align: center;
    }

    .ant-spin-nested-loading {
      width: 100%;
      height: 100%;

      .ant-spin-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        .ant-table {
          width: 100%;
          flex: 1;
          overflow: auto;
        }
      }
    }

  }

  /deep/ .dist-simple-table {
    .stage-item {
      .item-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

}

</style>
